<template>
  <div>
    <div class="title">
      <el-row>
        <el-col :span="1" style="width: 50px;">
          <span style="color:#757575;">位置 :</span>
        </el-col>
        <el-col :span="20">
          <span @click="tableshow" class="hand" :class="{'textactive' : !secondshow}">客户沟通(助理)</span>
          <span v-if="secondshow" :class="{'textactive' : secondshow}">> {{secondtitle}}</span>
        </el-col>
      </el-row>
    </div>
    <div class="posttable" v-show="!addShow">
      <el-row type="flex" justify="center" style="min-height: 50px;">
        <el-col :span="23">
          <el-col class="listbox">
            <el-row>
              <div class="tabletitle" style="float: left;">
                <el-col style="width: 40px;margin-right: 5px;">
                  <h5>搜索 : </h5>
                </el-col>
                <el-col
                  class="interviewtrack"
                  style="margin-right:10px;margin-left: 8px;width: 600px;"
                >
                  <el-col :span="23" style="width: 180px;float: left;margin-right: 20px;">
                    <el-date-picker
                      v-model="startTime"
                      type="date"
                      placeholder="请选择开始时间"
                      value-format="yyyy-MM-dd"
                      @change="selectstart"
                      :picker-options="pickerBeginDateBefore">
                    </el-date-picker>
                  </el-col>
                  <el-col :span="23" style="width: 180px;float: left;margin-right: 20px;">
                    <el-date-picker
                      v-model="endTime"
                      type="date"
                      placeholder="请选择结束时间"
                      value-format="yyyy-MM-dd"
                      @change="selectend"
                      :picker-options="pickerBeginDateAfter">
                    </el-date-picker>
                  </el-col>
                  <el-select
                    v-model="name"
                    placeholder="请选择客户简称"
                    @change="selectcustomer"
                  >
                    <el-option
                      v-for="(item,index) in customerNames"
                      :key="index"
                      :label="item.name"
                      :value="item.name"
                    ></el-option>
                  </el-select>
                </el-col>
              </div>
              <div style="float: right;">
                <el-row type="flex" justify="space-between" style="margin-top: 11px;" class="btn">
                  <el-input
                    style="width: 136px;"
                    size="small"
                    placeholder="请输入内容"
                    v-model.trim="inputValue"
                    @keyup.enter.native="searchMsg"
                  >
                    <i
                      slot="suffix"
                      class="el-input__icon el-icon-search"
                      style="cursor: pointer;"
                      @click="searchMsg"
                    ></i>
                  </el-input>
                  <el-button class="send" size="small" round @click="sendClick">跟进</el-button>
                  <div style="margin-left: 5px;" v-if="zhuli">
                    <el-button class="newcon" size="small" round @click="addshow">新增</el-button>
                    <el-button
                      class="edit"
                      @mousedown.native="editdown"
                      @mouseup.native="editup"
                      :class="{'active1' : newcolor1}"
                      size="small"
                      @click="editClick"
                      round
                    >修改
                    </el-button>
                  
                  </div>
                </el-row>
              </div>
            </el-row>
            <el-row type="flex" justify="center" style="padding-top: 15px;">
              <el-col :span="23">
                <el-table
                  ref="singleTable"
                  highlight-current-row
                  :data="tableData"
                  @current-change="handleCurrentChange"
                >
                  <el-table-column label="客户简称" width="120">
                    <template slot-scope="scope">
                      <span style="cursor: pointer; color:#1198ff;" @click="viewdetail(scope.row)">
                        {{scope.row.customerName}}</span>
                    </template>
                  </el-table-column>
                  
                  
                  <el-table-column prop="target" label="沟通对象"></el-table-column>
                  <el-table-column label="时间">
                    <template slot-scope="scope">
                      <span>{{scope.row.time | converTime("YYYY-MM-DD")}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="沟通人"></el-table-column>
                  <el-table-column prop="customerStatus" label="客户目前状态"></el-table-column>
                </el-table>
                <div class="pager">
                  <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="pagehandleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5,10,15]"
                    :page-size="pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalcount"
                  ></el-pagination>
                  
                  
                  <!--            未选择表格当前行的弹出框-->
                  <el-dialog
                    title="错误"
                    :visible.sync="editdialogVisible"
                    width="30%"
                    :before-close="handleClose"
                    class="deletedialog"
                  >
                    <div style="text-align: center">
                      <i class="el-icon-warning" style="font-size: 20px;color: #fcb543;">
                        <span style="font-size: 16px;color: #333;margin-left: 12px;">尚未选择任何客户</span>
                      </i>
                    </div>
                    <span slot="footer" class="dialog-footer">
                      <el-button class="sure" round @click="handleOpen">确 定</el-button>
                      <el-button round @click="handleClose" class="cancel">取 消</el-button>
                    </span>
                  </el-dialog>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-col>
      </el-row>
    </div>
    
    <div v-if="type == 3">
      <customer-detail v-if="addShow" :detail-code="detailcode" ref="customerDetail"></customer-detail>
    </div>
    <div v-if="type == 4">
      <edit-Customer
        v-if="addShow"
        :currentData="currentrow"
        @getData="getData1"
        ref="editCustomer"
      ></edit-Customer>
    </div>
    <div v-if="type == 5">
      <add-Customer v-if="addShow" @getData="getData1" ref="addCustomer"></add-Customer>
    </div>
  
  </div>
</template>

<script>
  import axios from "axios";
  import moment from 'moment'
  import tagsView from '../../store/modules/tagsView'
  import AddCustomer from "./addCustomer.vue";
  import EditCustomer from "./editCustomer.vue";
  import CustomerDetail from "./customerDetail.vue";
  
  export default {
    components: {
      AddCustomer,
      EditCustomer,
      CustomerDetail,
    },
    data() {
      return {
        startTime: '',
        endTime: '',
        pickerBeginDateBefore: {
          disabledDate: time => {
            if (this.endTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') > this.endTime
            }
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            if (this.startTime) {
              return moment(time.getTime()).format('YYYY-MM-DD') < this.startTime
            }
          }
        },
        inputValue: "",
        name: '',
        zhuli: false,
        secondshow: false,
        secondshow2: false,
        editdialogVisible: false,
        closedialogVisible: false,
        differcopierDialogVisible: false,
        tableData: [],
        currentPage: 1,
        pagesize: 15,
        totalcount: 0,
        newcolor1: false,
        detailVisible: false,
        detailVisible1: false,
        newcolor2: false,
        type: null,
        secondtitle: "",
        secondtitle2: "",
        addShow: false,
        currentRow: null,
        feedBackVisible: false,
        dialogFormVisible: false,
        samemailDialogVisible: false,
        dialogVisible: false,
        formLabelWidth: "120px",
        deletedis: false,
        id: [],
        customerNames: [],
      };
    },
    created() {
      this.success();
      axios
        .get(this.url + "/assistantcommunicate/getcustomernames") // 客户名称下拉列表请求
        .then(res => {
          this.unlogin(res.data.code);
          if (res.data.code == 200) {
            this.customerNames = res.data.data;
          }
        });
      if (tagsView.state.identity == 3) {
        this.zhuli = true;
      }
    },
    methods: {
      selectstart() {
        this.currentPage = 1;
        this.success();
      },
      selectend() {
        this.currentPage = 1;
        this.success();
      },
      //获取保存状态下的表格数据
      getData() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        var form = {
          condition: this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        };
        this.success();
      },
      getData1() {
        this.addShow = false;
        this.secondshow = false;
        this.currentRow = null;
        this.currentPage = 1;
        var form = {
          condition: this.searchword,
          pageNum: this.currentPage,
          pageSize: this.pagesize
        };
        this.success();
      },
      addshow() {
        this.addShow = !this.addShow;
        this.secondtitle = "新增客户沟通";
        this.secondshow = true;
        this.type = 5;
        this.$nextTick(() => {
          if (this.$refs.addCustomer) {
            this.$refs.addCustomer.initdata();
            this.$refs.addCustomer.resetFields("form");
          }
        });
      },
      sendClick() {
        if (this.currentRow == null) {
          document.documentElement.style.overflow = "hidden";
          //未选择表格行，展示的弹出框
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          this.$router.push({path: '/home/followupCommunication', query: {id: this.currentRow.id}})
        }
        
      },
      // 修改按钮点击
      editClick() {
        this.currentrow = null;
        if (this.currentRow == null) {
          document.documentElement.style.overflow = "hidden";
          //未选择表格行，展示的弹出框
          this.editdialogVisible = !this.editdialogVisible;
        } else {
          document.documentElement.style.overflow = "auto";
          this.addShow = !this.addShow;
          this.secondtitle = "修改客户沟通";
          this.secondshow = !this.secondshow;
          this.type = 4;
          this.currentrow = this.currentRow;
          //修改子组件的事件触发
          if (this.$refs.editCustomer) {
            this.$refs.editCustomer.clearData();
            this.$refs.editCustomer.resetFields("form");
          }
        }
      },
      editdown() {
        this.newcolor1 = true;
      },
      editup() {
        this.newcolor1 = false;
      },
      //从后台获取候选人表格的数据
      success() {
        axios
          .post(this.url + "/assistantcommunicate/getassistantdata", {
            customerName: this.name,
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize,
            startTime: this.startTime,
            endTime: this.endTime
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      },
      selectcustomer() {
        this.currentPage = 1;
        axios
          .post(this.url + "/assistantcommunicate/getassistantdata", {
            condition: this.inputValue,
            pageNum: this.currentPage,
            pageSize: this.pagesize,
            startTime: this.startTime,
            endTime: this.endTime,
            customerName: this.name
          })
          .then(res => {
            this.unlogin(res.data.code);
            if (res.data.code == 200) {
              if (res.data.data !== null) {
                this.tableData = res.data.data.list;
                this.totalcount = res.data.data.total;
              }
            }
          });
      },
      //搜索
      searchMsg() {
        this.currentPage = 1;
        this.success();
      },
      //组件页面消失，回到当前页面
      tableshow(row) {
        this.addShow = false;
        this.secondshow = false;
        this.$refs.singleTable.setCurrentRow(row);
        this.type = null;
        this.success();
      },
      
      handleOpen() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      handleClose() {
        this.editdialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      handleClose1() {
        this.closedialogVisible = false;
        document.documentElement.style.overflow = "auto";
      },
      //查看反馈内容
      viewdetail(val) {
        this.detailcode = val;
        this.addShow = !this.addShow;
        this.secondtitle = "查看沟通内容";
        this.secondshow = !this.secondshow;
        this.type = 3;
      },
      //查看反馈内容
      viewdetail1(val) {
        this.detailcode = val;
        this.addShow = !this.addShow;
        this.secondtitle = "查看反馈内容";
        this.secondshow = !this.secondshow;
        this.type = 1;
      },
      handleSizeChange(val) {
        this.pagesize = val;
        this.success();
      },
      handleCurrentChange(val) {
        this.currentRow = val;
      },
      pagehandleCurrentChange(val) {
        this.currentPage = val;
        this.success();
      },
    },
    watch: {
      inputValue: function (val) {
        if (val == "") {
          this.currentPage = 1;
          this.success();
        }
      }
    }
  };
</script>
<style scoped>
  .edit {
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #00cebf 0%, #009085 100%);
    padding: 7px 15px !important;
  }
  
  .send {
    margin-left: 5px;
    width: 65px;
    height: 28px;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #fc2342 0%, #d51934 100%);
    padding: 7px 15px !important;
  }
  
  .send:hover {
    color: #fff !important;
  }
  
  .newcon {
    width: 65px;
    height: 28px;
    padding: 7px 15px !important;
    opacity: 0.86;
    color: #fff;
    background: linear-gradient(to bottom, #5696f8 0%, #143dea 100%);
  }
  
  .title {
    background-color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    padding-left: 20px;
    margin-top: 6px;
    margin-bottom: 6px;
  }
  
  .active1 {
    background: linear-gradient(to bottom, #595dff 0%, #7073ff 100%);
  }
  
  .posttable {
    min-height: 700px;
    background-color: #fff;
  }
  
  .tabletitle {
    margin-left: 20px;
    height: 50px;
    line-height: 50px;
  }
  
  
  .textactive {
    color: #1099ff;
  }
  
  
  .send:hover {
    color: #fff !important;
  }
  
  .send:focus {
    color: #fff !important;
  }
  
  .pager {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  
  .el-pagination {
    margin-left: 50%;
    transform: translateX(-50%);
  }
  
  .listbox {
    width: 100%;
    margin: 0 auto;
  }
  
  /* @media screen and (min-width: 1475px) and (max-width: 1675px) {
    .listbox {
      width: 75%;
      margin-bottom: 20px;
    }
  }
  @media screen and (min-width: 1300px) and (max-width: 1475px) {
    .listbox {
      width: 72.4%;
      margin-bottom: 20px;
    }
  }
  @media screen and (min-width: 1200px) and (max-width: 1300px) {
    .listbox {
      width: 67%;
      margin-bottom: 20px;
    }
  }
  @media screen and (min-width: 1675px) and (max-width: 1700px) {
    .dialogBox {
      height: 400px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .listbox {
      width: 77%;
      margin: 0 auto;
    }
  } */
  
  /* @media screen and (min-width: 1701px) and (max-width: 1920px) {
    .dialogBox {
      height: 600px;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .listbox {
      width: 78%;
      margin: 0 auto;
    }
  }
  @media only screen and (min-width: 1920px) {
    .listbox {
      width: 79.46%;
      margin-right: 20px;
    }
  } */
</style>
